import { createKeyValuesDom } from '@src/components/createKeyValues';
import { getUrlParams } from '@src/utils';
import { FC, useState, useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
import { DefaultInfoBox } from '../component/defaultInfoBox';
import { PlanCodeInfo } from '../component/planCodeInfo';
import { PublicInfoBox } from '../component/publicInfoBox';
export const bigPolicyChinaNames = [
  { taskNo: '投保人名称' },
  { taskNo: '投保人类型' },
  { taskNo: '投保人证件类型' },
  { taskNo: '投保人证件号码' },
  { taskNo: '被保人名称' },
  { taskNo: '被保人类型' },
  { taskNo: '被保人证件类型' },
  { taskNo: '被保人证件号码' },
];
export const salesInfoChinaNames = [
  { taskNo: '代理人代码' },
  { taskNo: '代理人名称' },
  { taskNo: '渠道大类' },
  { taskNo: '渠道细分' },
];
export const underwritingInfoChinaNames = [
  { taskNo: '是否体内收/退费' },
  { taskNo: '是否体内收/退费(批改)' },
  { taskNo: '核保人员代码' },
  { taskNo: '核保人员名称' },
];
export const emailConfigChinaNames = [{ taskNo: '邮件主送' }, { taskNo: '邮件抄送' }];

export const PlanDetail: FC = () => {
  const [keyValueDom1, setKeyValueDom1] = useState<any>([<div key={1}></div>]);
  const [keyValueDom2, setKeyValueDom2] = useState<any>([<div key={1}></div>]);
  const [keyValueDom3, setKeyValueDom3] = useState<any>([<div key={1}></div>]);
  const [keyValueDom4, setKeyValueDom4] = useState<any>([<div key={1}></div>]);
  const searchObj: any = getUrlParams(useLocation().search);
  console.log(searchObj);

  useEffect(() => {
    setKeyValueDom1(
      createKeyValuesDom(bigPolicyChinaNames, {
        tempNo: null,
        taskNo: 'PZ20210906011',
        productItemType: 'BX0079',
        productItemName: 'hvdusguy',
      })
    );
    setKeyValueDom2(
      createKeyValuesDom(salesInfoChinaNames, {
        tempNo: null,
        taskNo: 'PZ20210906011',
        productItemType: 'BX0079',
        productItemName: 'hvdusguy',
      })
    );
    setKeyValueDom3(
      createKeyValuesDom(underwritingInfoChinaNames, {
        tempNo: null,
        taskNo: 'PZ20210906011',
        productItemType: 'BX0079',
        productItemName: 'hvdusguy',
      })
    );
    setKeyValueDom4(
      createKeyValuesDom(emailConfigChinaNames, {
        tempNo: null,
        taskNo: 'PZ20210906011',
        productItemType: 'BX0079',
        productItemName: 'hvdusguy',
      })
    );
  }, []);

  return (
    <div className="pageBox pad20 fff">
      <DefaultInfoBox />
      <div className="marg20"></div>
      <PublicInfoBox />
      <div className="publicH2Box margT20">
        <h2>投被保人大保单默认信息</h2>
        {keyValueDom1}
      </div>
      <div className="publicH2Box margT20">
        <h2>销售信息</h2>
        {keyValueDom2}
      </div>
      <div className="publicH2Box margT20">
        <h2>核保信息</h2>
        {keyValueDom3}
      </div>
      {['planConfig'].includes(searchObj.type) && <PlanCodeInfo></PlanCodeInfo>}
      {['prodConfig'].includes(searchObj.type) && (
        <>
          <div className="publicH2Box margT20">
            <h2>邮箱配置</h2>
            {keyValueDom4}
          </div>
          <div className="publicH2Box margT20">
            <h2>对接方案-承保</h2>
            <div className="item">
              <div>
                <div className="name">大保单聚合规则:</div>
                <div className="value">asdfasdfasdf</div>
              </div>
              <div>
                <div className="name">承保接口:</div>
                <div className="value">asdfasdfasdf</div>
              </div>
            </div>
          </div>
          <div className="publicH2Box margT20">
            <h2>对接方案-批改</h2>
            <div className="item">
              <div>
                <div className="name">退保接口:</div>
                <div className="value">asdfasdfasdf</div>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
};
